<template>
	<view class="conter">
		<!-- 要用list列表来写 -->
		<view @click="show = true" class="cuIcon">
			<view style="margin-top: 5rpx">
				<image :src="imgUrl + '/static/images/shaixuan.png'" mode=""></image>
			</view>
			<view>筛选</view>
		</view>
		<u-list height="1300rpx" @scrolltolower="scrolltolower">
			<u-list-item v-if="OrderList.length !== 0" v-for="(item, index) in OrderList" :key="index">
				<view class="allorders" @click="goDetails(item)">
					<view class="action">
						<view class="image_name">
							<view class="image">
								<image radius="7rpx"  :src="imgUrl + item.monImage" alt=""></image>
							</view>
							<view class="name">{{ item.monName }}</view>
						</view>
						<view style="font-size: 26rpx; position: absolute; right: 34.88rpx; margin-top: 130rpx; color: #fff">x1</view>
						<view class="econda">
							<view style="display: flex; margin-top: 48rpx">
								<view style="color: #8a92a3; font-size: 24rpx">实付款：</view>
								<view style="font-size: 32rpx">
									<text style="font-size: 24rpx">￥</text>
									{{ item.price ? item.price.toFixed(2) : 0 }}
								</view>
							</view>
						</view>
					</view>
					<view class="Time_box">
						<!-- 1232132132 -->
						{{ item.createTime }}
					</view>
					<view class="badge_box">
						<view class="orders" v-if="item.state == 2">订单已取消</view>
						<view class="orders" v-if="item.state == 1">订单成功</view>
						<view class="orders" v-if="item.state == 0">
							<u-count-down
								style="color: red"
								v-if="item.state == 0"
								@finish="endTimes(index)"
								:time="item.expireDate"
								format="HH:mm:ss"
								autoStart
								millisecond
								@change="onChange"
							></u-count-down>
						</view>
						<view class="orders_box" v-if="item.state == 0">查看详情</view>
					</view>
				</view>
			</u-list-item>
			<view v-if="OrderList.length == 0">
				<image style="
				width: 280rpx;
				height: 280rpx;
				margin: 200rpx 220rpx 0;
				" src="../../static/images/fighting.gif" mode=""></image>
			</view>
		</u-list>
		<u-popup bgColor="transparent" :show="show" :round="45" mode="bottom" @close="close">
			<view class="close">
				<view class="closeone">筛选</view>
				<view class="closetow"></view>
				<!-- icon -->
				<u-icon @click="closePopup" class="closethree" color="#fff" size="18" bold name="close"></u-icon>
				<!-- 选项 -->
				<view class="Options">
					<text>全部订单状态</text>
					<view class="Optionsone">
						<view :class="{ active: activeIndex == index }" @click="getactive(item, index)" v-for="(item, index) in venList" :key="index">
							{{ item }}
						</view>
					</view>
				</view>
				<!--按钮 -->
				<view class="butonbox">
					<button @click="closePopup" class="buttonone">取消</button>
					<button class="buttontow" @click="onConfirm">确定</button>
				</view>
			</view>
		</u-popup>
		<!-- 要用list列表来写 -->
	</view>
</template>

<script>
import { getOrderList } from '@/api/order';
import config from '@/config.js';
export default {
	name: 'market-order',
	data() {
		return {
			show: false,
			activeIndex: 0,
			venList: ['全部', '待支付', '已支付', '已取消'],
			timeData: {},
			show: false,
			seachParam: {
				pageNum: 1, //当前页
				pageSize: 10, //每页条数
				state: ''
			},
			imgUrl: config.imgUrl,
			loadText: {
				loadmore: '轻轻上拉',
				loading: '努力加载中',
				nomore: '实在没有了'
			},
			current: 0,
			loadStatus: 'loadmore',
			status: 'loadmore',
			OrderList: [],
			totalSize: 0 //总条数
		};
	},
	// 组件内部
	watch: {
		$route: function (newValue, oldValue) {
			this.OrderList = [];
			this.getList();
		}
	},

	created() {
		uni.$emit('componentShow');
		this.addRandomData();
	},
	methods: {
		endTimes(i) {
			this.OrderList[i].state = 2;
		},
		closePopup() {
			this.show = false;
		},
		getactive(e, index) {
			if (e === '待支付') {
				this.activeIndex = 1;
			} else if (e === '已支付') {
				this.activeIndex = 2;
			} else if (e === '已取消') {
				this.activeIndex = 3;
			} else {
				this.activeIndex = 0;
			}
		},

		onConfirm() {
			if (this.activeIndex == 0) {
				this.seachParam.state = '';
				this.seachParam.pageNum = 1;
				this.OrderList = [];
				this.addRandomData();
			} else if (this.activeIndex == 1) {
				this.seachParam.state = 0;
				this.seachParam.pageNum = 1;
				this.OrderList = [];
				this.addRandomData();
			} else if (this.activeIndex == 2) {
				this.seachParam.state = 1;
				this.seachParam.pageNum = 1;
				this.OrderList = [];
				this.addRandomData();
			} else if (this.activeIndex == 3) {
				this.seachParam.state = 2;
				this.seachParam.pageNum = 1;
				this.OrderList = [];
				this.addRandomData();
			}
			this.show = false;
		},

		endTimes(i) {
			this.OrderList[i].state = 9999;
		},
		onChange(e) {
			this.timeData = e;
		},
		goDetails(item) {
			if (item.state == 0) {
				uni.navigateTo({
					url: `/pages/MarketOrder/monOrder?id=${item.id}&isParents=1`
				});
			}
		},
		scrolltolower() {
			this.addRandomData();
		},
		addRandomData() {
			if (this.seachParam.pageNum == 1) {
				if (this.OrderList.length === 0) {
					this.getList();
				} else if (this.OrderList.length < this.totalSize) {
					this.seachParam.pageNum++;
					this.getList();
				} else {
					// 没有更多数据可加载
					this.status = 'nomore';
				}
			} else {
				if (this.totalSize > this.OrderList.length) {
					this.seachParam.pageNum++;
					this.getList();
				} else {
					// 没有更多数据可加载
					this.status = 'nomore';
				}
			}
		},
		async getList() {
			const res = await getOrderList(this.seachParam);
			if (res.code == 200) {
				res.data.pageData.map((i) => {
					this.OrderList.push(i);
				});
				// console.log(this.OrderList, 'this.OrderList');
				if (this.seachParam.state === 0 || this.seachParam.state == '') {
					this.state == res.data.state;
					this.OrderList.forEach((order) => {
						if (order.state == 0) {
							const expireTime = order.expireTime;
							const startDate = new Date();
							const endDate = new Date(expireTime);
							const timeDiff = endDate.getTime() - startDate.getTime(); // 计算时间差
							order.expireDate = Math.floor(timeDiff);
						}
					});
				}
				this.totalSize = res.data.totalSize;
			}
		}
	}
};
</script>

<style lang="less" scoped>
.conter {
	padding: 34.88rpx 34.88rpx;

	.cuIcon {
		display: flex;
		position: absolute;
		top: 30rpx;
		right: 47.09rpx;

		image {
			width: 21rpx;
			height: 19rpx;
		}

		view {
			font-size: 24rpx;
			font-weight: 500;
			color: #8a92a3;
			margin-left: 5rpx;
		}
	}

	.Time_box {
		left: 34.88rpx;
		bottom: 110rpx;
		color: #ffffff;
		font-weight: 500;
		font-size: 26rpx;
		position: absolute;
		font-family: 'font';
	}

	.allorders {
		margin-bottom: 35rpx;
		width: 680rpx;
		height: 358rpx;
		background: #15142d;
		border-radius: 14rpx;
		position: relative;
		box-shadow: 3rpx 3rpx 5rpx 0rpx rgba(0, 0, 0, 0.15);

		.action {
			display: flex;
			justify-content: space-between;
			padding: 34.88rpx 34.88rpx 0 34.88rpx;

				.image_name {
					display: flex;
					color: #ffffff;
					font-weight: 500;
					font-size: 26rpx;
					font-family: 'font';
					image {
						width: 140rpx;
						height: 140rpx;
						border-radius: 14rpx;
						box-shadow: 3rpx 3rpx 5rpx 0rpx rgba(0, 0, 0, 0.15);
					}
					.name{
						display: flex;
						height: 140rpx;
						margin-left: 34.88rpx;
						align-items: center;
					}
				}

			.econda {
				color: #ffffff;
				font-weight: 500;
				font-family: 'font';
				margin-top: 140rpx;
			}
		}

		.badge_box {
			width: 610rpx;
			height: 83rpx;
			display: flex;
			font-weight: 500;
			font-size: 26rpx;
			align-items: center;
			font-family: 'font';
			margin: 15.7rpx 34.88rpx;
			border-top: 1rpx solid #282c34;
			justify-content: space-between;
			padding: 0 34.88rpx 0 34.88rpx;

			.orders {
				color: #46a6f8;
			}

			.orders_box {
				display: flex;
				align-items: center;
				padding: 0 20rpx 0 20rpx;
				height: 50rpx;
				font-size: 24rpx;
				font-weight: 500;
				color: #ffffff;
				text-align: center;
				border-radius: 9rpx;
				box-shadow: 3rpx 3rpx 5rpx 0rpx rgba(0, 0, 0, 0.15);
				background: linear-gradient(270deg, #4463ff 0%, #3addeb 100%);
			}
		}
	}

	//弹框大盒子
	.close {
		width: 750rpx;
		height: 507.56rpx;
		background: #1c213a;
		border-radius: 45rpx 45rpx 0rpx 0rpx;
		opacity: 1;
		border: 3rpx solid #282c34;
		position: relative;

		.closeone {
			//筛选
			font-size: 31rpx;
			font-family: 'font';
			font-weight: 400;
			color: #ffffff;
			text-align: center;
			margin: 38.37rpx 0;
		}

		.closetow {
			//线条
			width: 694rpx;
			height: 1rpx;
			background: #282c34;
			margin: auto;
		}

		.closethree {
			position: absolute;
			right: 38.37rpx;
			top: 48.37rpx;
		}

		.Options {
			margin: 34.88rpx 30rpx;

			text {
				font-size: 26rpx;
				font-family: 'font';
				font-weight: 400;
				color: #8e97a8;
			}

			.Optionsone .active {
				background: #46a6f8;
				color: #fff;
			}

			.Optionsone {
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				margin: 17.44rpx 0;
				font-size: 26rpx;
				font-family: 'font';
				font-weight: 400;
				color: #3c424d;

				view {
					width: 140rpx;
					height: 61rpx;
					background: #0d0e12;
					border-radius: 16rpx;
					text-align: center;
					line-height: 63rpx;
				}
			}
		}

		//按钮
		.butonbox {
			display: flex;
			margin-top: 100rpx;

			.buttonone {
				width: 209rpx;
				height: 77rpx;
				background: #0d0e12;
				box-shadow: 3rpx 3rpx 5rpx 0rpx rgba(0, 0, 0, 0.15);
				border-radius: 14rpx 14rpx 14rpx 14rpx;
				opacity: 1;
				border: 2rpx solid #3c424d;
				font-size: 28rpx;
				font-family: 'font';
				font-weight: 400;
				color: #3c424d;
				line-height: 77rpx;
			}

			.buttontow {
				width: 436rpx;
				height: 77rpx;
				background: linear-gradient(270deg, #4463ff 0%, #3addeb 100%);
				box-shadow: 3rpx 3rpx 5rpx 0rpx rgba(0, 0, 0, 0.15);
				border-radius: 14rpx 14rpx 14rpx 14rpx;
				opacity: 1;
				font-size: 28rpx;
				font-family: 'font';
				font-weight: 400;
				color: #ffffff;
				line-height: 77rpx;
			}
		}
	}

	// 弹框大盒子
}

::v-deep .u-count-down__text {
	color: red;
}
</style>
